<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,
        td,
        th {
            border: 1px solid;
            border-collapse: collapse;
            text-align: center;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>商品</th>
                <th>单价</th>
                <th>操作</th>
                <th>总价</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <script>
        let tbody = document.querySelector("tbody");
        let arr = [
            { id: 1, name: '草莓丸奶', price: 15, count: 1 },
            { id: 2, name: '榛子拿铁', price: 35, count: 2 },
            { id: 3, name: '草莓啵啵橙橙', price: 15, count: 1 },
        ];
        function render() {
            tbody.innerHTML = arr.map(item => `
                <tr>
                    <td>${item.id}</td>    
                    <td>${item.name}</td>    
                    <td>${item.price}</td>    
                    <td>
                        <input type='button' value='-'>
                        <span>${item.count}</span>    
                        <input type='button' value='+' data-id=${item.id}>    
                    </td>    
                    <td>${item.price * item.count}</td>
                </tr>
            `).join('');
        }
        render();

        tbody.onclick = function (event) {
            // +号
            if (event.target.value == '+') {
                let id = event.target.dataset.id;
                let obj = arr.filter(item => item.id == id)[0];
                obj.count++;
                console.log(obj);
                render();
            }
        }
    </script>
</body>

</html>